<!--  -->
<template>
  <div class="hostip">
    <div class="noticeShowM">
      <p>
        关键词过滤可过滤网站敏感词汇。启用关键词过滤，浏览站点将自动替换符合条件关键词为 * 号
      </p>
    </div>
    <div class="formip" v-loading="loading">
      <el-form :model="addata">
        <el-row>
          <el-col :span="12">
            <el-form-item label="配置启用规则：" :label-width="formLabelWidth">
              <el-radio-group v-model="addata.adFilter" @change="resetData">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="guideshow"><div class="guideshow-btn" @click="guideShow"><i class="el-icon-question"></i>功能引导</div></div>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <div class="tit-uu"><span>配置关键词</span></div>
        <div class="wordlist">
          <div class="item">
            <div class="headx">已配置关键字 <span>{{addata && addata.adWords ? addata.adWords.length : ''}}项</span></div>
            <div class="conx">
              <el-scrollbar style="overflow-x: hidden; height:100%;">
                <el-form :model="form" v-if="addata && addata.adWords && addata.adWords.length > 0">
                  <el-form-item label="">
                    <el-checkbox-group v-model="form.adWords">
                      <el-checkbox v-for="(item,index) in addata.adWords" :label="item" :key="index" class="el-checkbox-width-x">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
              </el-scrollbar>
            </div>
            <div class="optbtn">
              <el-button type="primary" size="small" @click.stop="addWord">添加</el-button>
              <el-button type="warning" size="small" @click.stop="deleteAllWord">全部删除</el-button>
              <el-button type="danger" size="small" @click.stop="deleteWord">删除</el-button>
            </div>
          </div>
          <div class="item">
            <div class="headx">系统推荐关键字 <span>{{addata && addata.default ? addata.default.length : ''}}项</span></div>
            <div class="conx">
              <el-scrollbar style="overflow-x: hidden; height:100%;">
                <el-form :model="form">
                  <el-form-item label="">
                    <el-checkbox-group v-model="form.default">
                      <el-checkbox v-for="(item,index) in addata.default" :label="item" :key="index" :disabled="disabled[index]" class="el-checkbox-width-x">{{item}}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
              </el-scrollbar>
            </div>
            <div class="optbtn">
              <el-button type="primary" size="small" @click.stop="quote">引用</el-button>
              <el-button type="success" size="small" @click.stop="quoteAll">全部引用</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <DialogAddWords ref="dialogAddWords" :addResetWord="addResetWord"/>
    <DialogwordsGuide ref="wordsGuide" />
  </div>
</template>

<script>
import DialogAddWords from '@/pages/backend/user/host/adwords/DialogAddWords.vue'
import DialogwordsGuide from '@/pages/backend/guide/DialogwordsGuide.vue'
import * as functions from '@/core/functions.js'
import storageGuide from '@/core/storageGuide.js'
import PubSub from 'pubsub-js'
import * as PubsubType from '@/config/pubsubtype.js'
export default {
  created () {
    this.show()
  },
  data () {
    return {
      loading: true,
      formLabelWidth: '120px',
      addata: {
        // default: [],系统默认非法词
        // adFilter: 0, 0-关闭 1-开启
        // adWords: [] 用户配置的非法词
      },
      form: {
        adWords: [],
        default: []
      },
      disabled: []
    }
  },
  mounted () {
    // 新手导引
    let iswordsGuide = storageGuide.getGuideOptByKey('wordsGuide')
    if (!iswordsGuide) {
      this.$refs['wordsGuide'].show()
      storageGuide.setGuideOpt('wordsGuide', true)
    }
  },
  watch: {
    'addata.adWords': {
      handler (newValue) {
        if (newValue.length > 0) {
          this.disabled = []
          this.form.default = []
          newValue.forEach(item => {
            this.addata.default.forEach((ite, index) => {
              if (item === ite) {
                this.form.default.push(ite)
                this.disabled[index] = true
              }
            })
          })
          this.form.default = [...new Set(this.form.default)]
        }
      },
      deep: true
    }
  },
  methods: {
    show () {
      this.loading = true
      this.$post('/host/ad-words', null).then(response => {
        if (response) {
          this.addata = JSON.parse(JSON.stringify(response))
          this.loading = false
        }
      })
    },
    resetData () {
      let requestUpdateAdWoreds
      requestUpdateAdWoreds = {
        adFilter: this.addata.adFilter,
        adWords: this.addata.adWords
      }
      this.$jpost('/host/update-ad-words', requestUpdateAdWoreds).then(response => {
        if (response) {
          this.addata = JSON.parse(JSON.stringify(response))
        }
      })
    },
    addWord () {
      functions.hostSetup().then(setup => {
        if (setup && setup.adwordplus && setup.adwordplus === 1) {
          this.$refs['dialogAddWords'].show()
        } else {
          this.$message.error('请购买关键词过滤添加增值服务！')
        }
      })
    },
    addResetWord (data) {
      this.addata.adWords.push(data)
      this.resetData()
    },
    deleteWord () {
      if (this.form.adWords.length < 1) {
        this.$message.error('请选择要删除的关键词！')
        return
      }
      this.$confirm('本次删除关键词“' + this.form.adWords.length + '个”，删除关键词后，网站将不再过滤此关键词”', '删除提醒', {
        confirmButtonText: '确认删除',
        cancelButtonText: '我再想想',
        type: 'warning'
      }).then(() => {
        this.form.adWords.forEach(item => {
          this.addata.adWords = this.addata.adWords.filter(it => {
            return it !== item
          })
        })
        this.resetData()
        this.form.adWords = []
      }).catch(() => {
      })
    },
    deleteAllWord () {
      if (this.addata.adWords.length < 1) {
        this.$message.error('已全部删除！')
        return
      }
      let checkList = []
      checkList.push(...this.addata.adWords)
      this.form.adWords = checkList
      this.$confirm('本次删除全部关键词“' + this.form.adWords.length + '个”，删除关键词后，网站将不再过滤此关键词”', '删除提醒', {
        confirmButtonText: '确认删除',
        cancelButtonText: '我再想想',
        type: 'warning'
      }).then(() => {
        this.addata.adWords = []
        this.resetData()
        this.form.default = []
        this.form.adWords = []
        this.disabled = []
      }).catch(() => {
        this.form.adWords = []
      })
    },
    quote () {
      let disablednum = 0
      this.disabled.forEach(item => {
        if (item) {
          disablednum++
        }
      })
      if (this.form.default.length < 1 || this.form.default.length === disablednum) {
        this.$message.error('请选择要引用的关键词！')
        return
      }
      this.addata.adWords.push(...this.form.default)
      this.addata.adWords = [...new Set(this.addata.adWords)]
      this.resetData()
      this.form.default = []
    },
    quoteAll () {
      if (this.form.default.length === this.addata.default.length) {
        this.$message.error('已全部引用！')
        return
      }
      let checkList = []
      checkList.push(...this.addata.default)
      this.form.default = checkList
      this.addata.adWords.push(...this.form.default)
      this.addata.adWords = [...new Set(this.addata.adWords)]
      this.resetData()
      this.form.default = []
    },
    // 新手引导
    guideShow () {
      PubSub.publish(PubsubType.PUBSUB_BACKEND_MAIN_SCROLL_TOTOP, 0)
      this.$refs['wordsGuide'].show()
    }
  },
  components: {
    DialogAddWords,
    DialogwordsGuide
  }
}

</script>

<style scoped lang="scss">
.noticeShowM {
  border-left: 4px solid #409EFF;
  padding: 15px;
  font-size: 13px;
  line-height: 1.7;
  background: #F0F8FF;
  margin-bottom: 20px;
}
.tit-uu{
  border-bottom: 1px solid #D8D8D8;
  margin-bottom: 15px;
  span{
    display: inline-block;
    padding: 0 10px 10px;
    position: relative;
    font-size: 18px;
    &:before{
      content: '';
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 2px;
      width: 100%;
      background: #409EFF;
    }
  }
}
.wordlist {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  .item {
    width: 49%;
    border: 1px solid #e5e5e5;
    .headx {
      padding: 12px 15px;
      background-color: #eeeeee;
      position: relative;
      span {
        position: absolute;
        right: 15px;
        top: 50%;
        line-height: 1.4;
        margin-top: -0.7em;
        color: #999;
      }
    }
    .conx {
      padding: 15px;
      line-height: 2;
      height: 400px;
      /deep/ {
        .el-scrollbar__wrap {
          overflow-x: hidden;
        }
        .is-horizontal{
          display: none;
        }
      }
    }
    .optbtn {
      border-top: 1px solid #e5e5e5;
      padding: 15px;
      text-align: right;
    }
  }
}
.el-checkbox-width-x {
  min-width: 33%;
  min-width: calc(33% - 30px);
}
.guideshow {
  text-align: right;
  line-height: 40px;
  padding-right: 50px;
  .guideshow-btn{
    color: #258FFB;
    cursor: pointer;
    display: inline-block;
    i {
      font-size: 16px;
      margin-right: 3px;
      vertical-align: middle;
    }
  }
}
</style>
